<template>
	<view class="page">
		<!-- 订单状态 -->
		<view class="status-section">
			<uni-icons class="status-icon" type="checkbox-filled" size="48" color="#07c160" />
			<view class="status-info">
				<text class="status-text">配送中</text>
				<text class="delivery-time">预计 {{formatDateToMinute(oderDetail.expectTime)}} 送达</text>
			</view>
		</view>

		<!-- 快递信息卡片 -->
		<view class="info-card">
			<view class="express-info">
				<image class="express-logo" :src="expressLogo" mode="aspectFit" />
				<view class="express-detail">
					<text class="company-name">顺丰快递</text>
					<view class="express-number">
						<text>SF1234567890123</text>
						<uni-icons @click="copyTrackingNumber" class="copy-icon" type="copy" size="16"
							color="#666666" />
					</view>
				</view>
			</view>
			<view class="package-info">
				<view class="info-item">
					<text class="label">取件码</text>
					<text class="value">{{oderDetail.expressNo}}</text>
				</view>
				<view class="info-item">
					<text class="label">存放位置</text>
					<text class="value">{{oderDetail.deliverAddress}}</text>
				</view>
			</view>
		</view>

		<!-- 配送信息 -->
		<view class="delivery-info">
			<view class="address-item pickup">
				<uni-icons class="location-icon" type="location" size="20" color="#07c160" />
				<view class="address-content">
					<text class="address-type">取件地址</text>
					<text class="address-detail">{{oderDetail.deliverAddress}}</text>
					<text class="contact">{{oderDetail.userName}} {{oderDetail.userPhone}}</text>
				</view>
			</view>
			<view class="address-item delivery">
				<uni-icons class="location-icon" type="location-filled" size="20" color="#07c160" />
				<view class="address-content">
					<text class="address-type">收件地址</text>
					<text class="address-detail">{{oderDetail.userPhone}}</text>
					<text class="contact">{{oderDetail.deliverName}} {{oderDetail.deliverPhone}}</text>
				</view>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="order-details">
			<view class="detail-item">
				<text class="label">订单编号</text>
				<text class="value">{{oderDetail.orderId}}</text>
			</view>
			<view class="detail-item">
				<text class="label">下单时间</text>
				<text class="value">{{oderDetail.createTime}}</text>
			</view>
			<view class="detail-item">
				<text class="label">配送费用</text>
				<text class="value price">¥{{oderDetail.fee}}</text>
			</view>
			<view class="detail-item">
				<text class="label">支付方式</text>
				<text class="value">微信支付</text>
			</view>
			<view class="detail-item">
				<text class="label">备注信息</text>
				<text class="value">请放到门口，谢谢</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar" v-if="oderDetail.status===1||oderDetail.status===0">
			<button class="action-btn contact" @click="contactRider">
				<uni-icons type="phone-filled" size="16" color="#ffffff" />
				<text>联系骑手</text>
			</button>
			<button class="action-btn copy" @click="copyOrderNumber">
				<uni-icons type="copy" size="16" color="#07c160" />
				<text>复制订单号</text>
			</button>
			<button class="action-btn cancel" @click="cancelOrder">完成订单</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { finishOrder, getOderDetail, payOrder } from '../../api/order';
	const expressLogo = 'https://ai-public.mastergo.com/ai/img_res/300009dae282aca386a8623d7027b649.jpg';
	const orderId = ref(null)


	interface OrderDetail {
	  createTime: string;         // 订单创建时间，格式：YYYY-MM-DD HH:mm:ss
	  updateTime: string;         // 订单更新时间，格式：YYYY-MM-DD HH:mm:ss
	  orderId: number;            // 订单ID
	  userId: number;             // 用户ID
	  delivererId: number;       // 配送员ID
	  expressNo: string;          // 快递单号
	  orderTime: string;          // 订单时间，格式：ISO8601日期时间
	  expectTime: string;         // 预计配送时间，格式：ISO8601日期时间
	  senderAddress: string;      // 发货地址
	  deliverAddress: string;     // 收货地址
	  status: number;             // 订单状态，使用数字表示（例如：0：待支付，1：待取件，2：配送中，3：已完成，4：已取消）
	  fee: number;                // 配送费用
	  paymentId: string | null;   // 支付ID，可以为null（表示尚未支付）
	  amount: number | null;      // 订单金额，可以为null（如果没有指定）
	  paymentStatus: string | null; // 支付状态，可能为null（表示未支付）
	  userName: string;           // 用户名
	  userPhone: string;          // 用户手机号
	  deliverName: string;        // 配送员姓名
	  deliverPhone: string;       // 配送员手机号
	}

	const oderDetail = ref<OrderDetail>(null);
	const status = ref(null);
	const goBack = () => {
		uni.navigateBack();
	};

	const copyTrackingNumber = () => {
		uni.setClipboardData({
			data: 'SF1234567890123',
			success: () => {
				uni.showToast({
					title: '快递单号已复制',
					icon: 'success'
				});
			}
		});
	};

	const contactRider = () => {
		uni.makePhoneCall({
			phoneNumber: '13800138000'
		});
	};

	const copyOrderNumber = () => {
		uni.setClipboardData({
			data: '2024020512345678',
			success: () => {
				uni.showToast({
					title: '订单号已复制',
					icon: 'success'
				});
			}
		});
	};

	const cancelOrder = () => {
		uni.showModal({
			title: '提示',
			content: '确认完成订单吗？',
			success: async(res) => {
				if (res.confirm) {
					try {
						// 我收到的 此时进行送达操作
						if(status.value == 0){
							const response = await finishOrder(orderId.value)
							console.log(response.data)
							if(response.code===200){
								uni.showToast({
									title: '订单已完成',
									icon: 'success'
								});
							}
						}else{
							const response = await payOrder(orderId.value);
							if(response.code ===200){
								uni.showToast({
									title: '订单已完成',
									icon: 'success'
								});
							}
						}
					}catch(error){
						uni.showToast({
							title:"订单出了点问题",
							icon:'error'
						})
					}
					
				}
			}
		});
	};
	
	// 格式化日期
	function formatDateToMinute(dateStr: string): string {
	  const date = new Date(dateStr);
	
	  // 格式化为 yyyy-MM-dd HH:mm
	  const formattedDate = date.toLocaleString("zh-CN", {
	    year: "numeric",
	    month: "2-digit",
	    day: "2-digit",
	    hour: "2-digit",
	    minute: "2-digit",
	    hour12: false // 24小时制
	  });
	
	  return formattedDate.replace(/\//g, "-"); // 替换 "/" 为 "-" 以符合日期格式
	}
	
	// 查询订单详情
	const fechOderDetail = async() =>{
		const response = await getOderDetail(orderId.value);
		oderDetail.value = response.data;
		console.log(oderDetail.value)
	}
	onLoad((option)=>{
		orderId.value = option.orderId
		status.value = option.status
		fechOderDetail();
	})
</script>

<style scoped>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		position: relative;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.status-section {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.status-icon {
		margin-right: 30rpx;
		width: 96rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.status-info {
		display: flex;
		flex-direction: column;
	}

	.status-text {
		font-size: 18px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.delivery-time {
		font-size: 14px;
		color: #666666;
	}

	.info-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
	}

	.express-info {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.express-logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.express-detail {
		flex: 1;
	}

	.company-name {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.express-number {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666666;
	}

	.copy-icon {
		margin-left: 20rpx;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.package-info {
		padding-top: 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 14px;
		color: #999999;
	}

	.value {
		font-size: 14px;
		color: #333333;
	}

	.delivery-info {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
	}

	.address-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.address-item:last-child {
		margin-bottom: 0;
	}

	.location-icon {
		margin-right: 20rpx;
		margin-top: 6rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-content {
		flex: 1;
	}

	.address-type {
		font-size: 14px;
		color: #999999;
		margin-bottom: 10rpx;
	}

	.address-detail {
		font-size: 16px;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.contact {
		font-size: 14px;
		color: #666666;
	}

	.order-details {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin: 0 20rpx;
		padding: 30rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.price {
		color: #ff4d4f;
		font-weight: 500;
	}

	.bottom-bar {
		margin-top: auto;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.action-btn {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		border-radius: 40rpx;
		margin: 0 10rpx;
	}

	.action-btn text {
		margin-left: 10rpx;
	}

	.contact {
		background-color: #07c160;
		color: #ffffff;
	}

	.copy {
		background-color: #ffffff;
		border: 1px solid #07c160;
		color: #07c160;
	}

	.cancel {
		background-color: #ffffff;
		border: 1px solid #dddddd;
		color: #666666;
	}
</style>